/* 跳转出的链接前缀由
http://localhost:9888/wui/index.jsp#
改成
http://localhost:9888/spa/integration/static4engine/engine.html#
*/

import React from 'react';
import {inject, observer} from "mobx-react";
import {WeaTools,WeaTable} from 'ecCom';
import {Button} from 'antd';
@inject("outtersys_more_store")
@observer
export default class OutterSysMore extends React.Component{
	constructor(props) {
		super(props);
	    const { eid } = props.location.query;
	    this.props.outtersys_more_store.getDatas({eid});
	    this.getColumns = this.getColumns.bind(this);
	}
	getColumns(){
		const openUrl = "/spa/integration/static4engine/engine.html#/main";
		const { status, viewType } = this.props.outtersys_more_store;
		if(status == 0){
			return <div/>
		}
		let columns = [];
		if(viewType == '1'){
			columns = [{
		          dataIndex: 'routeUrl',
		          key: 'routeUrl',
		          width: '6%',
		          render: (text,record,index) => {
		          	return <img className ="outtersys-more-img" style={{width:record.width + 'px',height:record.height + 'px'}} title={record.name} onClick = {() => {
	          			if(record.routeUrl){
          					window.open(openUrl+record.routeUrl);
          				}else{
          					window.open(record.linkUrl);
          				}
		          	}} src={record.url} alt=''/>
		          }
	        },{
		          dataIndex: 'name',
		          key: 'name',
		          render: (text,record,index) => {
		          	return <span className ="outtersys-more-name" title={record.name} onClick = {()=>{
		          		if(record.routeUrl){
          					window.open(openUrl+record.routeUrl);
          				}else{
          					window.open(record.linkUrl);
          				}
		          	}}>{record.name}</span>
		          }
	        }];
		}
		if(viewType == '2'){
			for(let i= 0; i < 5; i++){
				columns.push({
		          	dataIndex: 'col'+i,
		          	key: 'col'+i,
		          	width: '20%',
		          	render: (text) => {
		          		if(text){
		          			return <div><div><img className ="outtersys-more-img" style={{width:text.width + 'px',height:text.height + 'px'}} title={text.name}  onClick={()=>{
		          				if(text.routeUrl){
		          					window.open(openUrl+text.routeUrl);
		          				}else{
		          					window.open(text.linkUrl);
		          				}
		          			}} src={text.url} alt=''/></div><span className ="outtersys-more-name" title={text.name} onClick={()=>{
		          				if(text.routeUrl){
		          					window.open(openUrl+text.routeUrl);
		          				}else{
		          					window.open(text.linkUrl);
		          				}
		          			}}>{text.name}</span></div>
		          		}else{
		          			return <div/>
			          	}
		          	}
		        });
			}
		}
        return columns;
    }
    render() {
	    const { outtersys_more_store, location} = this.props;
	    const { dataSource, total, viewType, pageSize, getDatas, goPage } = outtersys_more_store;
	    const { eid } = location.query;
	    const pagination = {
	    	current: goPage,
	    	pageSize: pageSize,
			total: viewType == '2' ? total/5 : total,
			showSizeChanger: true,
			onChange: (goPage) => {
				getDatas({eid,goPage,pageSize});
			},
			onShowSizeChange(current, pageNum) {
				getDatas({eid, goPage:1, pageSize: pageNum});
			}
		};
	    return (
        <div>
        	<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@u394tl`}  columns={this.getColumns()} dataSource={dataSource} pagination={pagination} />
      	</div>
	    );
	}
}
